import React from "react";
import { Box, Stack, Image, Button, useColorMode } from '@chakra-ui/react';
import { Link } from 'react-router-dom';
import logo from "../../assets/images/logo.png";

export default function Header() {
  const {colorMode, toggleColorMode} = useColorMode();

  return (
    <Box h="60px" bg={colorMode === "light" ? "gray.200" : "gray.700"}>
      <Box w="80%" m="auto" overflow="hidden" d="flex" justifyContent="space-between">
        <Box d="flex">
          <Image mt="10px" h="40px" mr="40px" w="40px" src={logo} />
          <Stack
            h="60px"
            align="center"
            direction={["row"]}
            spacing="24px"
            w="420px"
          >
            <Link to="/">首页</Link>
            <Link to="/form">表单</Link>
            <Link to="/card">卡片</Link>
            {/* <Link to="/work">Work</Link> */}
          </Stack>
        </Box>
        <Button
          _focus={{boxShadow: 'none'}}
          d="flex"
          colorScheme="teal"
          mt="10px"
          onClick={toggleColorMode}
        >
          切换模式
        </Button>
      </Box>
    </Box>
  );
}
